<template>
  <div>
    <!-- 头部导航栏 -->
    <div class="home_nav">
      <div class="home_left">
        <img
          src="https://ssr-static.msstatic.com/h5/mobile/@public-online/imgs/header/logo.acc780e7a19f22c1d8e89805488fcfef.png"
          alt=""
        />
      </div>
      <router-link tag="div" to="/search" class="home_right">
        <span class="iconfont icon-sousuo"></span>
      </router-link>
    </div>

    <!-- tab导航栏 -->
    <div class="bannerbox">
      <van-tabs animated>
        <!-- 全部 -->
        <van-tab :title="'全部'">
          <!-- 轮播图 -->
          <div class="swiper">
            <van-swipe
              class="my-swipe"
              :autoplay="3000"
              indicator-color="white"
            >
              <van-swipe-item
                ><img
                  src="https://livewebbs2.msstatic.com/home_recommend_live_app_1658728264.jpg?ips_thumbnail/0/w/700/"
                  alt=""
              /></van-swipe-item>
              <van-swipe-item
                ><img
                  src="https://livewebbs2.msstatic.com/home_recommend_live_app_1661435304.jpg?ips_thumbnail/0/w/700/"
                  alt=""
              /></van-swipe-item>
              <van-swipe-item
                ><img
                  src="https://livewebbs2.msstatic.com/home_recommend_live_app_1666532781.jpg?ips_thumbnail/0/w/700/"
                  alt=""
              /></van-swipe-item>
              <van-swipe-item
                ><img
                  src="https://livewebbs2.msstatic.com/home_recommend_live_app_1667997349.jpg?ips_thumbnail/0/w/700/"
                  alt=""
              /></van-swipe-item>
            </van-swipe>
          </div>
          <router-link
            tag="div"
            to="/infodetails"
            class="info_item"
            v-for="item in whole"
            :key="item.id"
          >
            <div class="info_item_left">
              <p>{{ item.introduce }}</p>
              <p>
                <span>{{ item.author }}</span>
                <span>{{ item.time }}</span>
              </p>
            </div>
            <div class="info_item_right">
              <img :src="item.img" alt="" />
            </div>
          </router-link>
        </van-tab>

        <!-- 王者荣耀 -->
        <van-tab :title="'王者荣耀'">
          <router-link
            tag="div"
            to="/infodetails"
            class="info_item"
            v-for="item in wzry"
            :key="item.id"
          >
            <div class="info_item_left">
              <p>{{ item.introduce }}</p>
              <p>
                <span>{{ item.author }}</span>
                <span>{{ item.time }}</span>
              </p>
            </div>
            <div class="info_item_right">
              <img :src="item.img" alt="" />
            </div>
          </router-link>
        </van-tab>

        <!-- 绝地求生 -->
        <van-tab :title="'绝地求生'">
          <router-link
            tag="div"
            to="/infodetails"
            class="info_item"
            v-for="item in jdqs"
            :key="item.id"
          >
            <div class="info_item_left">
              <p>{{ item.introduce }}</p>
              <p>
                <span>{{ item.author }}</span>
                <span>{{ item.time }}</span>
              </p>
            </div>
            <div class="info_item_right">
              <img :src="item.img" alt="" />
            </div>
          </router-link>
        </van-tab>

        <!-- 英雄联盟 -->
        <van-tab :title="'英雄联盟'">
          <router-link
            tag="div"
            to="/infodetails"
            class="info_item"
            v-for="item in yxlm"
            :key="item.id"
          >
            <div class="info_item_left">
              <p>{{ item.introduce }}</p>
              <p>
                <span>{{ item.author }}</span>
                <span>{{ item.time }}</span>
              </p>
            </div>
            <div class="info_item_right">
              <img :src="item.img" alt="" />
            </div>
          </router-link>
        </van-tab>

        <!-- 星秀 -->
        <van-tab :title="'星秀'">
          <router-link
            tag="div"
            to="/infodetails"
            class="info_item"
            v-for="item in xx"
            :key="item.id"
          >
            <div class="info_item_left">
              <p>{{ item.introduce }}</p>
              <p>
                <span>{{ item.author }}</span>
                <span>{{ item.time }}</span>
              </p>
            </div>
            <div class="info_item_right">
              <img :src="item.img" alt="" /></div></router-link
        ></van-tab>

        <!-- 吃喝玩乐 -->
        <van-tab :title="'吃喝玩乐'">
          <router-link
            tag="div"
            to="/infodetails"
            class="info_item"
            v-for="item in chwl"
            :key="item.id"
          >
            <div class="info_item_left">
              <p>{{ item.introduce }}</p>
              <p>
                <span>{{ item.author }}</span>
                <span>{{ item.time }}</span>
              </p>
            </div>
            <div class="info_item_right">
              <img :src="item.img" alt="" /></div></router-link
        ></van-tab>
      </van-tabs>
    </div>

    <!-- 底部固定 -->
    <div class="home_bottom">
      <router-link tag="div" to="/home" class="home_bottom_item">
        <span class="iconfont icon-zhibo1"></span>
        <p>直播</p>
      </router-link>
      <router-link tag="div" to="/info" class="home_bottom_item con">
        <span class="iconfont icon-zixun1"></span>
        <p>咨询</p>
      </router-link>
      <router-link tag="div" to="/follow" class="home_bottom_item">
        <span class="iconfont icon-guanzhu1"></span>
        <p>关注</p>
      </router-link>
      <router-link tag="div" to="/user" class="home_bottom_item">
        <span class="iconfont icon-wode"></span>
        <p>我的</p>
      </router-link>
    </div>
  </div>
</template>

<script>
import { getInfoData } from "../api/home.js";
export default {
  data() {
    return {
      whole: null,
      wzry: null,
      jdqs: null,
      yxlm: null,
      xx: null,
      chwl: null,
    };
  },
  created() {
    getInfoData().then((data) => {
      this.whole = data.whole;
      this.wzry = data.wzry;
      this.jdqs = data.jdqs;
      this.yxlm = data.yxlm;
      this.xx = data.xx;
      this.chwl = data.chwl;
    });
  },
};
</script>

<style lang="scss" scoped>
// tab导航栏
// 全部
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.bannerbox {
  .swiper {
    margin-top: 14px;
    img {
      width: 100%;
      height: 150px;
    }
  }
}
.info_item {
  display: flex;
  padding: 0 10px;
  margin: 10px 0;
  .info_item_left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    p {
      &:nth-child(1) {
        font-size: 14px;
        color: rgb(34, 34, 34);
        font-weight: 600;
        font-family: 黑体;
      }
      &:nth-child(2) {
        display: flex;
        justify-content: space-between;
        span {
          color: rgb(120, 122, 130);
          font-size: 13px;
          transform: scale(0.85, 0.85);
        }
      }
    }
  }
  .info_item_right {
    border-radius: 10px;
    overflow: hidden;
    width: 117px;
    height: 80px;
    margin-left: 10px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}

// 头部导航栏
.home_nav {
  display: flex;
  padding: 15px;
  justify-content: space-between;
  align-items: center;
  .home_left {
    width: 100px;
    height: 30px;
    background-size: 100% 100%;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .home_right {
    padding: 6px 14px;
    background-color: #f4f4f4;
    border-radius: 15px;
  }
  border-bottom: 1px solid #ededed;
}
// 底部固定
.home_bottom {
  display: flex;
  background-color: #fff;
  padding: 10px 0;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  .home_bottom_item {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    span {
      font-size: 20px;
    }
    p {
      margin-top: 3px;
    }
    &.con {
      color: #ffa200;
    }
  }
}
.van-tab__pane-wrapper {
  padding-bottom: 66px;
}
</style>
